<template>
<div>
  <h1>sum:{{ sum }}</h1>
  <h1>名字:{{ person.name }}</h1>
  <h1>年龄:{{ person.age }}</h1>
  <button @click="sum++">sum++</button>
  <button @click="person.name='王五'">改名字</button>
  <button @click="person.age++">改年龄</button>
  <button @click="changePerson">换人</button>
</div>
<hr>
<div>
  <h1>sum:{{ sum2 }}</h1>
  <h1>名字:{{ person2.name }}</h1>
  <h1>年龄:{{ person2.age }}</h1>
  <h1>车名:{{ car.name }},价格:{{ car.options.price }}</h1>
  <button @click="sum2++">sum++：好使</button>
  <button @click="person2.name='王五'">改名字：不好使</button>
  <button @click="person2.age++">改年龄：不好使</button>
  <button @click="changePerson2">换人：好使</button>
  <button @click="car.name='宝马'">改车名：好使</button>
  <button @click="car.options.price++">改价格：不好使</button>
</div>
</template>

<script setup lang="ts">
import { ref,shallowRef,shallowReactive } from 'vue'

const sum = ref(0)
let person = ref({
  name: '张三',
  age: 18
})
const changePerson = () => {
  person.value = {
    name: '李四',
    age: 20
  }
}
const sum2 = shallowRef(0)
let person2 = shallowRef({
  name: '张三',
  age: 18
})
let car = shallowReactive({
  name: '奔驰',
  options: {
    color: 'red',
    price: 1000000
  }
})
const changePerson2 = () => {
  person2.value = {
    name: '李四',
    age: 20
  }
}

</script>

<style scoped>


</style>


